import { useEffect, useState} from "react";
import {

   Modal, 
    Spin,
   
  } from 'antd';

import TreeView from 'devextreme-react/tree-view';
export default function BuildLaction({isOpenWordlocation,selectTitle,locationName,editTreeNodeItem,closeMadal}:any) {
    const [locationList,setLocationList] = useState<any>([
        {
          name: "附注一",
          ID: "一"
        },
        {
          name: "附注二",
          ID: "二"
        },
        {
          name: "附注三",
          ID: "三"
        },
        {
          name: "附注四",
          ID: "四"
        },
        {
          name: "附注五",
          ID: "五"
        },
        {
          name: "附注六",
          ID: "六"
        },
        { 'name': '附注七', 'ID': '七' },
        { 'name': '附注八', 'ID': '八' },
        { 'name': '附注九', 'ID': '九' },
        { 'name': '附注十', 'ID': '十' },
        { 'name': '附注十一', 'ID': '十一' },
        { 'name': '附注十二', 'ID': '十二' },
        { 'name': '附注十三', 'ID': '十三' },
        { 'name': '附注十四', 'ID': '十四' },
        { 'name': '附注十五', 'ID': '十五' },
        { 'name': '附注十六', 'ID': '十六' },
        { 'name': '附注十七', 'ID': '十七' },
        { 'name': '附注十八', 'ID': '十八' },
        { 'name': '附注十九', 'ID': '十九' },
        { 'name': '附注二十', 'ID': '二十' }
    
    ])
 
    const [btnLoading, setBtnLoading] = useState(false)
  

    useEffect(() => {
        setLocationList(locationList.map((a:any)=>{
      
            if(a.ID === locationName){
              return { ...a, selected: true };
            } else {
              return { ...a, selected: false };;
            }
    }))
    },[locationName])


  


    return ( <Modal
        title={"生成位置"}
        open={isOpenWordlocation}
        maskClosable={false}
        width={380}
        onOk={async()=>{
            setBtnLoading(true)
            await editTreeNodeItem()
            setBtnLoading(false)
        }}   
        centered
        destroyOnClose
        onCancel={closeMadal}
        // footer={
        //   <Button key="submit" type="primary" loading={btnLoading} >确认 </Button>
        // }
      >
        <Spin spinning={btnLoading} >
          <TreeView 
              dataSource={locationList}
              dataStructure="plain"
              keyExpr="ID"
              displayExpr="name"
              selectionMode="single"
              selectByClick={true}
              showCheckBoxesMode={'normal'}
              onItemSelectionChanged={selectTitle}
          />
        </Spin>
      </Modal>
    )


    
}


